<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

    const ctx = document.getElementById('canvas')

    const gl = ctx.getContext('webgl')

    // 创建着色器源码
    const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;
    attribute vec4 aTex;
    varying vec2 vTex;

    void main() {
      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      vTex = vec2(aTex.x, aTex.y);
    }
  `; // 顶点着色器

    const FRAGMENT_SHADER_SOURCE = `
    precision lowp float; // 指定精度
    uniform sampler2D uSampler; // 2倍纹理
    // uniform samplerCube uSampler; // 立方体纹理
    varying vec2 vTex;

    void main() {
      gl_FragColor = texture2D(uSampler, vTex); // 参数1当前变量，参数2纹理坐标
    }
  `; // 片元着色器

    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

    const aPosition = gl.getAttribLocation(program, 'aPosition');
    const aTex      = gl.getAttribLocation(program, 'aTex');
    const uSampler  = gl.getUniformLocation(program, 'uSampler');

    const points = new Float32Array([
        -0.5, 0.5, 0.0, 1.0,
        -0.5, -0.5, 0.0, 0.0,
        0.5, 0.5, 1.0, 1.0,
        0.5, -0.5, 1.0, 0.0,
    ])

    const buffer = gl.createBuffer();
    const BYTES  = points.BYTES_PER_ELEMENT;

    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0);

    gl.enableVertexAttribArray(aPosition)

    gl.vertexAttribPointer(aTex, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2);

    gl.enableVertexAttribArray(aTex)

    const img  = new Image();
    img.onload = function () {
        // 创建纹理对象
        const texture = gl.createTexture();

        // 翻转 图片 Y轴
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)

        // 开启一个纹理单元
        gl.activeTexture(gl.TEXTURE0);

        // 绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D, texture);

        // 处理放大缩小的逻辑
        // 参数1作用是二维纹理，参数2作用是缩小（下边是放大），参数3作用是四周的加权平均值
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)

        // 横向 纵向 平铺的方式
        // 参数1作用是二维纹理，参数2作用是水平填充（下边是垂直填充），参数3作用是边缘延伸
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)

        // 配置纹理图像
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);

        gl.uniform1i(uSampler, 0);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }

    img.src = '../assets/content.png'

</script>
